<template>
  <view class="card-main" @click="toHouse()">
    <view class="photo" :style="{backgroundImage: 'url('+forPhoto(houseItem)+')'}">
      <view class="card-tag" :style="houseItem.showSellPrice ? 'background-color: #ba9d61;' : ''">
        {{houseItem.showSellPrice ? '售' : '租'}}
      </view>
    </view>
    <view class="title">{{houseItem.title}}</view>
    <view class="bottom-part">
      <view class="detail">{{houseItem.room_hall}}/{{houseItem.house_area}}m²</view>
    </view>
    <view class="bottom-part">
      <!--  总售价 -->
      <text class="price" v-if="houseItem.showSellPrice">
          {{( houseItem.house_sell_price || '0' ) | tenMillion }}
        <text v-if="houseItem.house_sell_price > 10000">万</text>
        元
      </text>
      <!--    租价    -->
      <text class="price" v-else>
          {{( houseItem.house_price || '0' ) | tenMillion }}
        <text v-if="houseItem.house_price>10000">万</text>
        元/月
      </text>
    </view>
  </view>
</template>

<script>
  import {chatMixin} from '@/util/reuse/chatMixin'
  import {filter} from "../../util/reuse/filter"
  import {HOUSE_ITEM_PK, ROUTER_OBJ, uniNavigate} from "../../util/misc"
  import {uniRedirect, uniSetStorageSync} from "../../util/funcs"

  export default {
    mixins: [chatMixin, filter],
    props: {
      // 可能要发送的房源卡片, 结构如下
      readyHouseItem: {
        type: Object,
        default() {
          return {
            id: '',
            title: '',
            room_hall: '',
            house_area: '',
            house_price: '',
            house_thumb: '',
            house_sell_price: '',
            showSellPrice: '' // 判断租售类型 Boolean
          };
        }
      },
      // 以发送的房源卡片, 以信息形式展示
      messageHouseItem: {
        type: String,
        default() {
          return undefined
        }
      }
    },
    data() {
      return {
        isMessage: false, // 已经发送的卡片
        houseItem: {}
      }
    },
    methods: {
      forPhoto(houseItem) {
        // houseItem.house_thumb && houseItem.house_thumb[0]
        if (houseItem.id)
          if (houseItem) {
            let thumb = houseItem.house_thumb[0]
            return thumb || ''
          }
        return ''
      },
      toHouse() {
        console.log(1)
        if (this.isMessage) {
          uniSetStorageSync("ROUTER_OBJ", {
            ...this.houseItem,
            showSellPrice: this.houseItem.showSellPrice
          })
          let ROUTER_OBJ = JSON.stringify({
            ...this.houseItem,
            showSellPrice: this.houseItem.showSellPrice
          });
          uniNavigate(`/displayDetails/displayDetails?obj=${ROUTER_OBJ}`)
        }
      }
    },
    mounted() {
      if (this.messageHouseItem) {
        let obj = this.messageHouseItem.toString()
        // let obj = tem.replace(HOUSE_ITEM_PK, "")
        // console.log('check obj:', obj)
        try {
          this.houseItem = JSON.parse(obj)
          this.isMessage = true
        } catch (e) {
          console.log('解析错误', e)
        }
      } else {
        // this.houseItem = this.sHouseItem // 不从vuex里面拿
        this.houseItem = this.readyHouseItem
      }
      //
    },
    beforeDestroy() {
      this.set_canSendHouseCard(false)
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  
  .card-main {
    position: relative;
    padding: 3vw;
    background-color: white;
    width: 55vw;
    @include borderBox;
    border-radius: 2vw;
    padding-bottom: 50rpx;
    .photo {
      border-radius: 1vw;
      width: 49vw;
      height: 24vw;
      @include cover-no-repeat-center
      background-color: #999;
      margin-bottom: 2vw;
      
      .card-tag {
        padding-left: 10rpx;
        padding-right: 10rpx;
        width: 35px;
        height: 36rpx;
        background-color: #e45a5a;
        border-radius: 4rpx;
        @include center;
        font-size: 22rpx;
        color: #ffffff;
        @include ellipsis;
      }
    }
    
    .title {
      font-size: 14px;
      color: #333;
      margin-bottom: 1vw;
      font-weight: normal;
      /*background-color: yellow;*/
      width: 100%;
      @include ellipsis;
    }
    
    .bottom-part {
      display: flex;
      justify-content: space-between;
      width: 100%;
      /*background-color: yellow;*/
      
      .detail {
        color: #888;
        font-size: 12px;
      }
      
      .price {
        position: absolute;
        right:3vw;
        text-align: right;
        font-size: 14px;
        color: #F56C6C;
        font-weight: bold;
        text-align: right;
        /*background-color: yellow;*/
        height: 18px;
        overflow: hidden;
      }
    }
  }
</style>
